<script setup>
import { inject, ref } from "vue";
import { transferApi } from "@/services/upfrade";
import { offlinePayApi } from "@/services/order";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { base_URL } from "@/utils/http";

onLoad((e) => {
  transferfun();
  order_id.value = e.order_id;
  price.value = e.price;
});

const fileList4 = ref([]);

const lastfun = () => {
  let pages = getCurrentPages();

  // 获取页面栈的长度，即页面跳转层级
  let level = pages.length;
  if (level > 1) {
    uni.navigateBack();
  } else {
    uni.switchTab({
      url: "/pages/index/index",
    });
  }
};

const transferData = ref({});
const transferfun = async () => {
  try {
    let res = await transferApi();
    transferData.value = res.data;
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

//上传图片
// 删除图片
const deletePic4 = (event, type) => {
  let fileList = [];

  fileList = fileList4.value;

  fileList.splice(event.index, 1);
};
const afterRead4 = async (event, type) => {
  let fileListLen = 0;
  let filelist = [];
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

  fileListLen = fileList4.value.length;
  filelist = fileList4.value;

  let lists = [].concat(event.file);
  lists.map((item) => {
    filelist.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });

  // return;
  for (let i = 0; i < lists.length; i++) {
    uni.uploadFile({
      url: base_URL + "/api/upload/file",
      filePath: lists[i].url,
      name: "file",
      formData: {
        user: "test",
      },
      header: {
        Authorization: uni.getStorageSync("Authorization"),
      },
      success: async (uploadFileRes) => {
        let data = JSON.parse(uploadFileRes.data);
        if (data.code == 200) {
          filelist.splice(fileListLen, 1, {
            ...item,
            status: "success",
            message: "",
            url: data.data.url,
          });
          fileListLen++;
        }
      },
      fail: function (e) {
        uni.hideLoading();
      },
    });

    let item = fileList4.value[fileListLen];
  }
};

const offlinePayData = ref({});
const price = ref("");
const order_id = ref("");
const remark = ref("");
const voucher = ref([]);
const payfun = async () => {
  if (fileList4.value.length <= 0) {
    uni.$u.toast("请上传付款凭证");
    return;
  } else {
    fileList4.value.forEach((item, index) => {
      voucher.value.push(item.url);
    });
  }

  offlinePayData.value = {
    order_id: order_id.value,
    voucher: voucher.value,
    remark: remark.value,
    price: price.value,
  };
  try {
    let res = await offlinePayApi(offlinePayData.value);
    uni.showToast({
      title: res.info,
      icon: "none",
    });
    setTimeout(() => {
      uni.redirectTo({
        url: "/pages/upgrade/offline_paystate/index?status=" + res.code,
      });
    }, 1000);
  } catch (e) {
    uni.$u.toast(e.info);
    setTimeout(() => {
      uni.redirectTo({
        url: "/pages/upgrade/offline_paystate/index?status=" + e.code,
      });
    }, 1000);
  }
};
</script>

<template>
  <view class="content">
    <text class="text-title">请选择付款</text>
    <view class="content-banner">
      <view class="banner-box">
        <view class="banner-top">
          <text>对公转账</text>
          <text>请注意！转账请备注用途</text>
        </view>
        <view class="banner-middle">
          <up-textarea
            v-model="remark"
            placeholder="请备注“姓名+手机号+用途”，以便财务快速核对，为您处理业务。如：张三+13888888888+购买广州市白云区独家代理。"
          ></up-textarea>
        </view>
        <view class="banner-footer">
          <view class="footer-item">
            <text>收款账号</text>
            <up-copy :content="transferData.account">
              <view class="info-value">
                <text> {{ transferData.account || "---" }}</text>
                <image
                  src="@/static/cloudlibrary/copy-img.png"
                  mode="scaleToFill"
                  v-if="transferData.account"
                />
              </view>
            </up-copy>
          </view>
          <view class="footer-item">
            <text>公司名称</text>
            <up-copy :content="transferData.company_name">
              <view class="info-value">
                <text> {{ transferData.company_name || "---" }}</text>
                <image
                  src="@/static/cloudlibrary/copy-img.png"
                  mode="scaleToFill"
                  v-if="transferData.company_name"
                />
              </view>
            </up-copy>
          </view>
          <view class="footer-item">
            <text>开户行</text>
            <up-copy :content="transferData.opening_bank">
              <view class="info-value">
                <text> {{ transferData.opening_bank || "---" }}</text>
                <image
                  src="@/static/cloudlibrary/copy-img.png"
                  mode="scaleToFill"
                  v-if="transferData.opening_bank"
                />
              </view>
            </up-copy>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="content-middle">
      <view class="middle-box">
        <view class="middle-top">
          <text>线下pos机付款</text>
        </view>
        <view class="middle-middle">
          <text
            >请到公司指定财务收款处进行支付，由财务开据收款凭证。非公司指定财务收款，视为未收到款项，谨访受骗。</text
          >
        </view>
        <view class="middle-footer">
          <view class="footer-item">
            <text>指定财务联系方式：</text>
            <text
              >*********
              <image src="./static/phone-icon.png" mode="scaleToFill"
            /></text>
          </view>
        </view>
      </view>
    </view> -->

    <view class="uplade-up">
      <view class="uplade-up-title">上传凭证（{{ fileList4.length }}/6）</view>
      <up-upload
        :fileList="fileList4"
        @afterRead="
          (val) => {
            afterRead4(val, 4);
          }
        "
        @delete="
          (val) => {
            deletePic4(val, 4);
          }
        "
        name="1"
        multiple
        :maxCount="6"
      ></up-upload>
    </view>
    <view class="foodr-bt">
      <view class="bt-box">
        <view class="bt-next" @click="lastfun">上一步</view>
        <view class="bt-sbuit" @click="payfun">提交付款审核</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "./offline_pay.scss";
</style>
